<template>
	<div class="unmannedExperienceShop">
		<div class="banner">
			<h1>新零售，打造无人体验店</h1>
			<p>智能时代是体验时代，新零售是趋势，新制造是开始</p>
		</div>
		<div class="container1">
			<div class="title">无人店解决方案</div>
			<p>无人店将目前先进的大数据技术和互联网科技运用到家装体验中来，形成集体验、推荐于一体的智慧平台。</p>
			<div class="item">
				<img src="./img/product_nonestore_mode1@3x.png" alt="">
				<div class="info">
					<h2>无人体验店整体样板间展示</h2>
					<span class="gang"></span>
					<span>智加云提供无人店的打造，致力于为更多领域服务，提升无人店客户转化率。</span>
				</div>
			</div>
			<div class="item">
				<img src="./img/product_nonestore_mode2@3x.png" alt="">
				<div class="info">
					<h2>云货架的展示</h2>
					<span class="gang"></span>
					<span>云货架提供智能化场景服务，海量商品库实时调。</span>
				</div>
			</div>
		</div>
		<div class="container2">
			<div class="title">无人体验店定位</div>
			<div class="con">
				<div class="item">
					<img src="./img/product_nonestore_position_icon1@3x.png" alt="">
					<span>提升服务体验</span>
				</div>
				<div class="item">
					<img src="./img/product_nonestore_position_icon2@3x.png" alt="">
					<span>AI智能化营销</span>
				</div>
				<div class="item">
					<img src="./img/product_nonestore_position_icon3@3x.png" alt="">
					<span>致力于服务更多商家</span>
				</div>
				<div class="item">
					<img src="./img/product_nonestore_position_icon4@3x.png" alt="">
					<span>致力于服务更多企业</span>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script>
	export default {
		name: 'unmannedExperienceShop',
	}
</script>

<style lang="stylus" scoped>
	.unmannedExperienceShop{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/product_nonestore_banner@3x.png') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
				margin: 0.5rem 0; 
			}
			p{
				width: 54.8%;
				text-align: center;
				color: rgba(255,255,255,0.8);
				font-size: 0.24rem;
				line-height: 0.36rem;
			}
		}
		.container1{
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333333;
				margin: 0.6rem 0 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: #666;
				line-height: 0.5rem;
				margin-bottom: 0.5rem;
			}
			.item{
				width: 92%;
				overflow: hidden;
				background: #fff;
				display: flex;
				flex-direction: column;
				margin-bottom: 0.4rem;
				img{
					width: 100%;
					height: 3.8rem;
					margin-bottom: 0.5rem;
				}
				.info{
					width: 82%;
					margin: 0 5%;
					h2{
						font-size: 0.36rem;
						color: #333;
					}
					.gang{
						display: block;
						width: 0.2rem;
						height: 0.04rem;
						background: #333;
						margin: 0.4rem 0 0.4rem 0.1rem;
					}
					span{
						display: flex;
						flex-direction: row;
						align-items: center;
						font-size: 0.3rem;
						color: #666;
						line-height: 1.5;
						margin-bottom: 0.4rem;
						i{
							color: #ccc;
							font-size: 0.2rem;
							margin-right: 0.1rem;
						}
					}
				}
			}
		}
		.container2{
			width: 100%;
			/*height: 7.88rem;*/
			background-image: linear-gradient(0deg, #233574 0%, #0D183E 99%);
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			.title{
				font-size: 0.36rem;
				color: #FFF;
				margin: 0.6rem 0 0.5rem 0;
			}
			.con{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.item{
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 0.7rem;
					img{
						width: 1.2rem;
						height: 1.2rem;
						margin-bottom: 0.2rem;
					}
					span{
						font-size: 0.24rem;
						color: rgba(255,255,255,0.9);
						line-height: 2;
					}
				}
			}
		}
	}
</style>

